<template>
  <view class="mm-wrap">
    <view
      class="mm-document"
      :style="{
        paddingTop: globStatusBarHeight + globNavbarHeight + 'px',
      }"
    >
      <view
        class="mm-document__title"
        :style="{
          height: globNavbarHeight + 'px',
          top: globStatusBarHeight + 'px',
        }"
        >{{ getCurrentPlayItem.title || '' }}</view
      >
      <scroll-view scroll-y class="mm-document__scroll-view">
        <view class="mm-document-content">
          <u-parse :html="imageTextContent"></u-parse>
        </view>
      </scroll-view>
      <view class="mm-document__open" @click="onDialogOpen">
        <u-image width="102rpx" height="102rpx" src="@/pageCourse/static/images/shu.png"></u-image>
      </view>
    </view>

    <!-- 文档弹出 -->
    <view class="mm-dialog" v-show="dialogVisible">
      <view :style="{ height: globStatusBarHeight + 'px' }"></view>
      <view class="mm-dialog-title">
        {{ getCurrentPlayItem.title || '' }}
      </view>
      <scroll-view scroll-y :style="{ height: mescrollHeight }">
        <view class="mm-dialog-content">
          <u-parse :html="imageTextContent"></u-parse>
        </view>
      </scroll-view>
      <view class="mm-dialog-close" @click="onDialogClose">
        <u-image width="102rpx" height="102rpx" src="@/pageCourse/static/images/shu.png"></u-image>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState, mapGetters } from 'vuex'

export default {
  data() {
    return {
      imageTextContent: '', // 图文内容
      dialogVisible: false, // 文档弹出
      timer: null,
      seconds: 0,
    }
  },
  computed: {
    ...mapGetters({
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
      globWindowHeight: 'projectSetting/globWindowHeight',
    }),
    ...mapState({
      getCurrentPlayItem: (state) => state.course.currentPlayItem,
    }),
    mescrollHeight() {
      let height = this.globWindowHeight - this.globNavbarHeight - this.globStatusBarHeight
      return `${height}px`
    },
  },
  methods: {
    // 打开弹出
    onDialogOpen() {
      this.dialogVisible = true
      this.$emit('change')
    },
    // 关闭弹出
    onDialogClose() {
      this.dialogVisible = false
      this.$emit('change')
    },
    // 获取播放地址
    getPlayerFile(data) {
      // #ifdef APP-PLUS
      this.imageTextContent = data.fileurl_string_text
      // #endif
      // #ifndef APP-PLUS
      this.imageTextContent = data.fileurl_string
      // #endif
      this.timing()
    },
    // 定时添加学习记录
    timing() {
      clearInterval(this.timer)
      this.seconds = 0
      this.timer = setInterval(() => {
        this.seconds += 10
        this.handleAddLearning()
      }, 10000)
    },
    // 添加学习记录
    handleAddLearning() {
      this.$edu.api.createCourseRecord({
        course_id: this.getCurrentPlayItem.course_id,
        section_id: this.getCurrentPlayItem.id,
        current_time: this.seconds,
      })
    },
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
}
</script>

<style lang="scss" scoped>
.mm-wrap {
  height: 415rpx;
}
.mm-document {
  height: 100%;
  background-color: #ffffff;
  position: relative;
  .mm-document__title {
    font-size: 32rpx;
    font-weight: 500;
    color: #303133;
    display: flex;
    align-items: center;
    position: absolute;
    left: 30rpx;
  }
  .mm-document-content {
    padding: 0 30rpx;
  }
  .mm-document__scroll-view {
    height: 100%;
  }
  .mm-document__open {
    position: absolute;
    right: 18rpx;
    bottom: 12rpx;
  }
}
.mm-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10075;
  background: #ffffff;
  .mm-dialog-title {
    padding: 0 30rpx;
    height: 44px;
    font-size: 32rpx;
    font-weight: 500;
    color: #303133;
    line-height: 44px;
  }
  .mm-dialog-content {
    padding: 30rpx;
  }
  .mm-dialog-close {
    position: fixed;
    bottom: 60rpx;
    right: 18rpx;
  }
}
</style>
